Audio & Video Tag IN HTML

The <audio> and <video> tags in HTML enable seamless integration of audio and video content into web pages. With <audio>, you can embed audio files, while <video> facilitates the inclusion of video files. Both tags support attributes like controls for playback control, autoplay for automatic playback, and loop for continuous looping. Multiple file formats can be specified within <source> elements to ensure compatibility across different browsers. These tags enhance user engagement by providing rich multimedia experiences directly within the browser.

  • Example :

  • Audio Example

    • <!DOCTYPE html> <html> <body> <h4>Audio</h4> <audio controls> <source src="imgs/example.mp3" type="audio/mpeg"> </audio> </body> </html>

    In this example,
    i. The <audio> tag is used to embed an audio file into the HTML document.
    ii. The controls attribute adds playback controls such as play, pause, and volume slider to the audio player.
    iii. Inside the <audio> tag, you specify one or more <source> elements. Each <source> element contains the src attribute which points to the URL of the audio file, and the type attribute which specifies the MIME type of the audio file. This allows the browser to choose the most suitable format supported.

  • Video Tag

    • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <video width="600" height="400" controls> <source src="imgs\PBA.mp4" type="video/mp4"> </video> <p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p> </body> </html>

    i. The <video> tag is used to embed a video file into the HTML document.
    ii. The width and height attributes specify the dimensions of the video player in pixels.
    iii. The controls attribute adds playback controls like play, pause, and volume to the video player.
    iv. Inside the <video> tag, you specify one or more <source> elements. Each <source> element contains the src attribute which points to the URL of the video file, and the type attribute which specifies the MIME type of the video file. This allows the browser to choose the most suitable format supported.


  • Conclusion :

    • In conclusion, HTML's <audio> and <video> tags provide seamless integration of multimedia content into web pages. With simple attributes like controls, src, and type, developers can embed audio and video files effortlessly. This enhances user experience by allowing playback controls and fallback content for unsupported formats. Leveraging these tags ensures compatibility across various browsers, enriching websites with dynamic audio and visual elements, thus engaging visitors effectively.

    HTML All Topics
    Introduction Elements Heading Tag List Tag Color Tag Table
    Paragraph Tag Formatting Tag Font Style Table Form CSS In HTML
    Script Tag in HTML Div Tag Hyperlink Quotation Tag Image Canvas
    Table's Colspan & Rowspan Nav Tag Audio & Video Tag